<template>
	<view class="pad_def pad_top">
		<u-toast ref="uToast" />
		<view class="header_switc pad_def ">
			<view class="left">
				<view class="tit">影音娱乐管控策略设置</view>
				<u-button size="mini" v-if="false">一键开启推荐策略</u-button>
			</view>
		</view>
		<view class="contacts_list mar_top">
			<view class="contacts_item box box-align-center box-pack-between" v-for="item in systemSimpleList" :key="item.id">
				<view style="display: flex; justify-content: space-between; align-items: center; width: 80%;">
					<view style="width: 40rpx;">
						<image :src="item.avatar" mode="widthFix" style="width: 40rpx;"></image>
					</view>
					<view>
						<view class="name">{{item.name}} <text style="color: #999; font-size: 20rpx; padding-left: 20rpx;">允许</text></view>
						<view style="padding-left: 20rpx; font-size: 30rpx; color: #999;">{{item.show_name}}</view>
					</view>
					<view style="padding-left: 30rpx;">
						<u-switch v-model="item.checked" active-color="#5993ff" inactive-color="#e3e3e3"  @change="((val)=>{dataChange(val, item.db_name)})"></u-switch>
					</view>
				</view>
			</view>
		</view>
		
		<view class="contacts_list mar_top">
			<view class="contacts_item box box-align-center box-pack-between " v-for="item in dataStorageList" :key="item.id">
				<view style="display: flex; justify-content: space-between; align-items: center; width: 80%;">
					<view style="width: 40rpx;">
						<image :src="item.avatar" mode="widthFix" style="width: 40rpx;"></image>
					</view>
					<view>
						<view class="name">{{item.name}} <text style="color: #999; font-size: 20rpx; padding-left: 20rpx;">允许</text></view>
						<view style="padding-left: 20rpx; font-size: 30rpx; color: #999;">{{item.show_name}}</view>
					</view>
					<view style="padding-left: 30rpx;">
						<u-switch v-model="item.checked" active-color="#5993ff" inactive-color="#e3e3e3"  @change="((val)=>{dataChange(val, item.db_name)})"></u-switch>
					</view>
				</view>
			</view>
		</view>
		
		<view class="contacts_list mar_top">
			<view style="background-color: #fff;">*若以上功能打开,则建议开启下列管控功能</view>
			<view class="format">
				<view style="width: 40rpx;">
					<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/leftIcon/noPlayVideo.png" mode="widthFix" style="width: 40rpx;"></image>
				</view>
				<view>
					<view class="name_text">娱乐视频类文件禁用</view>
					<view style="padding-left: 20rpx; font-size: 30rpx; color: #999;">当前<text v-if="isOpenFormat" style="color: green;">已开启</text><text v-else style="color: red;">未开启</text> ，开启后文本类文件在文件管理器中将禁止打开</view>
				</view>
				<view>
					<u-icon name="arrow-right"  @click="showVideoList=true" v-if="showVideoList==false"></u-icon>
					<u-icon name="arrow-down"  @click="showVideoList=false" v-if="showVideoList==true"></u-icon>
				</view>
			</view>
			
			<view style="padding-left: 20rpx; background-color: #fff;" v-if="showVideoList">
				<view class="box box-align-center box-pack-between mar_bot">
					<view>视频文件格式黑名单:</view>
					<u-button size="mini" @click="checkedAll(3)">全选</u-button>
				</view>
				<view>
					<u-checkbox-group>
								<u-checkbox 
									@change="checkboxChange" 
									v-model="item.checked" 
									v-for="(item, index) in videoList" :key="index" 
									:name="item.name"
									shape="circle"
								>{{item.name}}</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="box box-align-center box-pack-between  mar_def pad_def">
					<u-button type="primary" plain size="mini" @click="editMediaFormat(3)">确定</u-button>
					<u-button size="mini" @click="cacelCheckFormat(3)">取消</u-button>
				</view>
			</view>
			
			<view class="format">
				<view style="width: 40rpx;">
					<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/leftIcon/noPlayVoice.png" mode="widthFix" style="width: 40rpx;"></image>
				</view>
				<view>
					<view class="name_text">娱乐音频类文件禁用</view>
					<view style="padding-left: 20rpx; font-size: 30rpx; color: #999;">当前<text v-if="isOpenFormat" style="color: green;">已开启</text><text v-else style="color: red;">未开启</text>，开启后音频类文件在文件管理器中将禁止打开</view>
				</view>
				<view style="padding-left: 40rpx;">
					<u-icon name="arrow-right"  @click="showVoiceList=true" v-if="showVoiceList==false"></u-icon>
					<u-icon name="arrow-down"  @click="showVoiceList=false" v-if="showVoiceList==true"></u-icon>
				</view>
			</view>
			<view style="padding-left: 20rpx; background-color: #fff;" v-if="showVoiceList">
				<view class="box box-align-center box-pack-between mar_bot">
					<view>音频文件格式黑名单:</view>
					<u-button size="mini" @click="checkedAll(2)">全选</u-button>
				</view>
				<view>
					<u-checkbox-group>
								<u-checkbox 
									@change="checkboxChange" 
									v-model="item.checked" 
									v-for="(item, index) in voiceList" :key="index" 
									:name="item.name"
									shape="circle"
								>{{item.name}}</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="box box-align-center box-pack-between  mar_def pad_def">
					<u-button type="primary" plain size="mini" @click="editMediaFormat(2)">确定</u-button>
					<u-button size="mini" @click="cacelCheckFormat(2)">取消</u-button>
				</view>
			</view>
			
			
			<view class="format">
				<view style="width: 40rpx;">
					<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/leftIcon/noPlayImg.png" mode="widthFix" style="width: 40rpx;"></image>
				</view>
				<view>
					<view class="name_text">娱乐图形类文件禁用</view>
					<view style="padding-left: 20rpx; font-size: 30rpx; color: #999;">当前<text v-if="isOpenFormat" style="color: green;">已开启</text><text v-else style="color: red;">未开启</text>，开启后图形类文件在文件管理器中将禁止打开</view>
				</view>
				<view style="padding-left: 40rpx;">
					<u-icon name="arrow-right"  @click="showImgList=true" v-if="showImgList==false"></u-icon>
					<u-icon name="arrow-down"  @click="showImgList=false" v-if="showImgList==true"></u-icon>
				</view>
			</view>
			<view style="padding-left: 20rpx; background-color: #fff;" v-if="showImgList">
				<view class="box box-align-center box-pack-between mar_bot">
					<view>图形文件格式黑名单:</view>
					<u-button size="mini" @click="checkedAll(1)">全选</u-button>
				</view>
				<view>
					<u-checkbox-group>
								<u-checkbox 
									@change="checkboxChange" 
									v-model="item.checked" 
									v-for="(item, index) in imgList" :key="index" 
									:name="item.name"
									shape="circle"
								>{{item.name}}</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="box box-align-center box-pack-between  mar_def pad_def">
					<u-button type="primary" plain size="mini" @click="editMediaFormat(1)">确定</u-button>
					<u-button size="mini" @click="cacelCheckFormat(1)">取消</u-button>
				</view>
			</view>
			
			<view class="format">
				<view style="width: 40rpx;">
					<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/leftIcon/noPlayFile.png" mode="widthFix" style="width: 40rpx;"></image>
				</view>
				<view>
					<view class="name_text">娱乐文本类文件禁用</view>
					<view style="padding-left: 20rpx; font-size: 30rpx; color: #999;">当前<text v-if="isOpenFormat" style="color: green;">已开启</text><text v-else style="color: red;">未开启</text>，开启后文本类文件在文件管理器中将禁止打开</view>
				</view>
				<view style="padding-left: 40rpx;">
					<u-icon name="arrow-right"  @click="showFileList=true" v-if="showFileList==false"></u-icon>
					<u-icon name="arrow-down"  @click="showFileList=false" v-if="showFileList==true"></u-icon>
				</view>
			</view>
			<view style="padding-left: 20rpx; background-color: #fff;" v-if="showFileList">
				<view class="box box-align-center box-pack-between mar_bot">
					<view>文本文件格式黑名单:</view>
					<u-button size="mini" @click="checkedAll(4)">全选</u-button>
				</view>
				<view>
					<u-checkbox-group>
								<u-checkbox 
									@change="checkboxChange" 
									v-model="item.checked" 
									v-for="(item, index) in fileList" :key="index" 
									:name="item.name"
									shape="circle"
								>{{item.name}}</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="box box-align-center box-pack-between  mar_def pad_def">
					<u-button type="primary" plain size="mini" @click="editMediaFormat(4)">确定</u-button>
					<u-button size="mini" @click="cacelCheckFormat(4)">取消</u-button>
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>
import { editSetting, getMediaFormat, getSetting } from '../../api/systemControl';
	export default {
		data() {
			return {
				id: 0,  //other_setting表主键
				mainRecreationChecked:false,
				checked: false,
				
				systemSimpleList:[
					// {id:0,name:'系统视频功能', show_name: '开关关闭则禁止使用系统视频播放器', avatar:'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/leftIcon/systemVideo.png', db_name: '', checked: false},
					{id:1,name:'系统音乐功能', show_name: '开关关闭则禁止使用系统音乐播放器', avatar:'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/leftIcon/systemVoice.png', db_name: 'setting_music', checked: false},
					{id:2,name:'系统图库功能', show_name: '开关关闭则禁止使用系统图库功能', avatar:'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/leftIcon/systemImg.png', db_name: 'setting_picture', checked: false},
					{id:4,name:'系统相机功能', show_name: '开关关闭则禁止使用系统相机功能', avatar:'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/leftIcon/systemCamera.png', db_name: 'setting_camera', checked: false},
					{id:5,name:'系统录音功能', show_name: '开关关闭则禁止使用系统录音功能', avatar:'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/leftIcon/systemSound.png', db_name: 'setting_recording', checked: false},
					{id:6,name:'系统壁纸功能', show_name: '开关关闭则禁止使用系统壁纸功能', avatar:'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/leftIcon/systemWallpaper.png', db_name: 'setting_wallpaper', checked: false},
				],
				dataStorageList:[
					{id:0,name:'数据传输功能', show_name: '开关关闭则插入数据线时只能保留充电功能', avatar:'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/leftIcon/dataTransmission.png', db_name: 'setting_usb', checked: false},
					{id:1,name:'TF扩展存储卡/OTG', show_name: '开关关闭则禁用TF扩展储存卡及OTG功能', avatar:'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/leftIcon/TeCard.png', db_name: 'setting_memory', checked: false},
					{id:2,name:'蓝牙-数据传输功能', show_name: '开关关闭则禁用蓝牙功能进行数据传输', avatar:'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/leftIcon/blueToothVoice.png', db_name: 'setting_bluetooth', checked: false},
					{id:4,name:'蓝牙-音频功能', show_name: '开关关闭则禁用蓝牙功能进行音频传输', avatar:'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/leftIcon/blueToothVoice.png', db_name: 'setting_bhtvideo', checked: false},
					{id:5,name:'文件管理器功能', show_name: '开关关闭则禁止使用系统文件管理器功能', avatar:'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/leftIcon/systemFileManage.png', db_name: 'setting_file', checked: false},
					{id:6,name:'影音娱乐管控', show_name: '开关关闭则禁止影音娱乐功能', avatar:'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/leftIcon/systemVideo.png', db_name: 'setting_tfmedia', checked: false},
					
				],
				showVideoList: false,
				showVoiceList: false,
				showImgList: false,
				showFileList: false,
				videoList: [],
				voiceList: [],
				imgList: [],
				fileList: [],
				totalCheckFormat: new Set(),
				isOpenFormat: false,
			};
		},
		onLoad() {
			this.getMediaFormatControl()
			this.getSettingControl()
		},
		methods: {
			getSettingControl() {
				getSetting({
					id: uni.getStorageSync("snId")
				}).then(res => {
					let data = res.data
					this.id = res.data.id
					this.isOpenFormat = Boolean(data['setting_tfmedia'])
					this.systemSimpleList.forEach((item, index, arr) => {
						let key = item.db_name
						arr[index].checked = Boolean(data[key])
					})
					this.dataStorageList.forEach((item, index, arr) => {
						let key = item.db_name
						arr[index].checked = Boolean(data[key])
					})
				}).catch(err => {
					
				})
			},
			getMediaFormatControl() {
				getMediaFormat({
					id: uni.getStorageSync("snId")
				}).then(res => {
					this.videoList = res.data[3]
					this.voiceList = res.data[2]
					this.imgList = res.data[1]
					this.fileList = res.data[4]
					res.otherData.map(val => {
						this.totalCheckFormat.add(val)
					})
				})
			},
			//修改系统管控信息
			dataChange(val, name) {
			    let editForm = {
					userId: uni.getStorageSync('userId'),
					lastIp: uni.getStorageSync('Ip'),
					name: name,
					value: Number(val),
					snId: uni.getStorageSync('snId'),
					id: this.id
				}
				editSetting(editForm).then(res => {
					this.getSettingControl()
					this.$refs.uToast.show({
						title: res.msg,
						icon: false,
						type: 'success'
					})
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						icon: false,
						type: 'error'
					})
					this.getSettingControl()
				})
			},
			editMediaFormat(type) {
				let arr = [...this.totalCheckFormat]
				let value = arr.length > 0 ? arr.join(',') : ","
				if (value == "") value = ","
				let editForm = {
					userId: uni.getStorageSync('userId'),
					lastIp: uni.getStorageSync('Ip'),
					name: 'setting_tfmedia_format',
					value: value,
					snId: uni.getStorageSync('snId'),
					id: this.id
				}
				editSetting(editForm).then(res => {
					this.getSettingControl()
					this.$refs.uToast.show({
						title: res.msg,
						icon: false,
						type: 'success'
					})
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						icon: false,
						type: 'error'
					})
					this.getSettingControl()
				})
			},
			checkboxChange(e) {
				if (e.value) {
					this.totalCheckFormat.add(e.name)
				}else {
					this.totalCheckFormat.delete(e.name)
				}
				
			},
			// 全选
			checkedAll(type) {
				switch (type) {
					case 1: 
					this.imgList.map(val => {
						val.checked = true;
						this.totalCheckFormat.add(val.name)
					});
					break;
					case 2:
					this.voiceList.map(val => {
						val.checked = true;
						this.totalCheckFormat.add(val.name)
					});
					break;
					case 3:
					this.videoList.map(val => {
						val.checked = true;
						this.totalCheckFormat.add(val.name)
						
					});
					break;
					case 4:
					this.fileList.map(val => {
						val.checked = true;
						this.totalCheckFormat.add(val.name)
					});
					break
				}
			},
			cacelCheckFormat(type) {
				switch (type) {
					case 1: 
					this.imgList.map(val => {
						val.checked = false;
						this.totalCheckFormat.delete(val.name)
					});
					break;
					case 2:
					this.voiceList.map(val => {
						val.checked = false;
						this.totalCheckFormat.delete(val.name)
					});
					break;
					case 3:
					this.videoList.map(val => {
						val.checked = false;
						this.totalCheckFormat.delete(val.name)
					});
					break;
					case 4:
					this.fileList.map(val => {
						val.checked = false;
						this.totalCheckFormat.delete(val.name)
					});
					break
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.header_switc{
	border-radius: 30rpx;
	background: #5070b9;
	padding: 50rpx 40rpx;
	.left{
		display: flex;
		justify-content: space-between;
		.tit{
			font-size: 30rpx;
			color: #fff;
		}
		.sub_tit{
			font-size: 24rpx;
			color: #7d9ce1;
			padding-right: 40rpx;
		}
	}
}

.contacts_list{
	.contacts_item{
		background-color: #fff;
		padding: 40rpx 30rpx;
		.name{
			font-size: 35rpx;
			padding-left: 20rpx;
		}
	}
}

.format {
	background-color: #fff;
	padding: 40rpx 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.name_text{
	font-size: 35rpx;
	padding-left: 20rpx;
}
</style>
